<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="admin/css/pintuer.css">
<link rel="stylesheet" href="admin/css/admin.css">
<script src="admin/js/jquery.js"></script>
<script src="admin/js/pintuer.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script src="ckfinder/ckfinder.js"></script>
<script src="ckeditor/samples/js/sample.js" type="text/javascript"></script>
<link href="ckeditor/samples/sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
$(function(){
	$("#url1").change(function(){
		var objUrl = getObjectURL(this.files[0]) ;
		$("#showimg").attr("src",objUrl);
	});
	$("#url2").change(function(){
		var objUrl = getObjectURL(this.files[0]) ;
		$("#showhead").attr("src",objUrl);
	});
	$('#add_member_form').bind('submit',function(){
		$('#sub_btn').attr('disable','true');
		var formData = new FormData();
		var belong = $('input[name="belong_4"').val();
		var title = $('input[name="title_4"]').val();
		var content = CKEDITOR.instances.TextArea1.getData();
		var isneturl = $('#selectMemberRank').val();
		var fmResource = $('#selectMemberState').val() == "" ? "1" : $('#selectMemberState').val();
		formData.append('img',$("#url2")[0].files[0]);
		formData.append('belong',belong);
		formData.append('title',title);
		formData.append('content',content);
		formData.append('isneturl',isneturl);
		formData.append('fmResource',fmResource);
		$.ajax({
			url:'admin/addMember.do',
			type:'post',
			data:formData,
			dataType:'html',
			cache: false,  
	        contentType: false,  
	        processData: false,
			success:function(strValue){
				if(strValue.length > 0){
					alert(strValue);
					$('#sub_btn').attr('disable','false');
					window.location.href="admin/aboutus_1.do";
				}
			}
		});
		return false;
		
});
});
	//建立一个可存取到该文件的URL
	function getObjectURL(file) {
		var url = null ; 
		if (window.createObjectURL!=undefined) { // basic
			url = window.createObjectURL(file) ;
		} else if (window.URL!=undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file) ;
		} else if (window.webkitURL!=undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file) ;
		}
		return url ;
	}
	function del(id){
		if(confirm("确定删除id为"+id+"的成员？")){
			$.ajax({url:'admin/delMemberById.do?id='+id,context: document.body,success:function(data){
				alert(data);
				window.location.reload();
			}})
		}
	}
</script>
<div class="panel admin-panel margin-top">
	<div class="padding border-bottom">  
  	<button type="button" class="button border-yellow" onclick="document.getElementById('addMember').scrollIntoView();"><span class="icon-plus-square-o"></span> 团队管理</button>
  	</div>
  <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>关于我们</strong></div>
  <div class="body-content">
    <form method="post" class="form-x" action="admin/aboutus.do" enctype="multipart/form-data">   
      <input type="hidden" name="belong"  value="3" /> 
      <c:if test="${!empty aboutus.id && aboutus.id != 0}">
      	<input type="hidden" name="id"  value="${aboutus.id }" />  
      </c:if> 
      <div class="form-group">
        <div class="label">
          <label>欢迎标题：</label>
        </div>
        <div class="field">
          <input type="text" class="input w50" name="title" value="${aboutus.title }" data-validate="required:请输入标题" />         
          <div class="tips"></div>
        </div>
      </div> 
      <div class="form-group">
      <div class="form-group">
        <div class="label">
          <label>欢迎图片：</label>
        </div>
        <div class="field">
          <input type="file" id="url1" name="file" class="input tips" style="width:25%; float:left;" data-place="right" />
          <div class="tipss">图片尺寸：1920*200</div>
        </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label>封面预览：</label>
        </div>
        <div class="field">
          <img id="showimg" alt="${aboutus.title }" src="${aboutus.resource }" width="357" height="245">
        </div>
      </div>
        <div class="label">
          <label>关于我们内容：</label>
        </div>
        <div class="field">
        	<div id="contentdiv" style="display: none;">${aboutus.content }</div>
          <textarea class="ckeditor" name="content" id="TextArea1" cols="20" rows="2"></textarea>
          <script type="text/javascript">
          	CKEDITOR.replace('TextArea1');
          	var content = $('#contentdiv').html();
        	CKEDITOR.instances.TextArea1.setData(content);
          </script>        
        </div>
      </div>
     <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
          <input id="sub_btn" type="submit" class="button bg-main icon-check-square-o" value="提交"/>
        </div>
        <div class="label">
          <label style="color: red;">${addRslt }</label>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="panel admin-panel">
  <div class="panel-head"><strong class="icon-reorder"> 成员列表</strong></div>
  <table class="table table-hover text-center">
    <tr>
      <th width="5%">ID</th>
      <th width="15%">姓名</th>
      <th width="20%">头像</th>
      <th width="20%">描述</th>
      <th width="10%">等级</th>
      <th width="10%">状态</th>
      <th width="15%">操作</th>
    </tr>
   	<c:if test="${!empty members }">
   		<c:forEach items="${members }" var="member" varStatus="a">
   			<tr>
      			<td>${member.id }</td>     
      			<td>${member.title }</td>     
      			<td>
      			<a href="admin/getMemberById.do?id=${member.id }"><img src="${member.resource }" alt="${member.title }" width="100" height="67" /></a>   
      			</td>     
      			<td>${member.content }</td>
      			<td>${member.isneturlDesc }</td>
      			<td>${member.fmResourceDesc }</td>
      			<td><div class="button-group">
      			<a class="button border-main" href="admin/getMemberById.do?id=${member.id }"><span class="icon-edit"></span> 修改</a>
      			<a class="button border-red" href="javascript:void(0)" onclick="del(${member.id})"><span class="icon-trash-o"></span> 删除</a>
      			</div></td>
    		</tr>
   		</c:forEach>
   	</c:if>
  </table>
</div>
<div class="panel admin-panel margin-top" id="addMember">
  <div class="panel-head"><strong><span class="icon-pencil-square-o"></span> 增加成员</strong></div>
  <div class="body-content">
    <form method="post" id="add_member_form" class="form-x" enctype="multipart/form-data">   
      <input type="hidden" name="belong_4"  value="4" /> 
      <div class="form-group">
        <div class="label">
          <label>姓名：</label>
        </div>
        <div class="field">
          <input type="text" class="input w30" name="title_4" value="${member.title }" data-validate="required:请输入姓名" width="30" />         
          <div class="tips"></div>
        </div>
      </div> 
      <div class="form-group">
      <div class="form-group">
        <div class="label">
          <label>成员头像：</label>
        </div>
        <div class="field">
          <input type="file" id="url2" name="file" class="input tips" style="width:25%; float:left;" data-place="right" />
          <div class="tipss">图片尺寸：200*200</div>
        </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label>头像预览：</label>
        </div>
        <div class="field">
          <img id="showhead" alt="${member.title }" src="${member.resource }" width="357" height="245">
        </div>
      </div>
        <div class="label">
          <label>成员介绍：</label>
        </div>
        <div class="field">
          <textarea class="input" name="content_4" style="height:100px;" >${member.content }</textarea>        
        </div>
      </div>
     <div class="form-group">
          <div class="label">
            <label>成员级别：</label>
          </div>
          <div class="field">
            <select name="filetype" class="input w50" id="selectMemberRank">
              <option value="">请选择成员级别</option>
              <option value="1">忠勇黄铜</option>
              <option value="2">不屈白银</option>
              <option value="3">荣耀黄金</option>
              <option value="4">华贵铂金</option>
              <option value="5">璀璨钻石</option>
              <option value="6">超凡大师</option>
              <option value="7">最强王者</option>
            </select>
            <div class="tips"></div>
          </div>
        </div>
     <div class="form-group">
          <div class="label">
            <label>成员状态：</label>
          </div>
          <div class="field">
            <select name="filetype" class="input w50" id="selectMemberState">
              <option value="">请选择成员状态</option>
              <option value="1">上班</option>
              <option value="2">请假</option>
              <option value="3">离职</option>
              
            </select>
            <div class="tips"></div>
          </div>
        </div>
     <div class="form-group">
        <div class="label">
          <label></label>
        </div>
        <div class="field">
          <input type="submit" class="button bg-main icon-check-square-o" value="提交"/>
        </div>
      </div>
    </form>
  </div>
 </div>
</body></html>